<template>
	<view class="page">
		<view class="logo">
			<image :src="logoPng" mode=""></image>
		</view>
		<!-- 填写区 -->
		<view class="input-info">
			<view class="info">
				<view class="phone-prefix">
					<picker mode="selector" :range="prefixList" @change="onPrefixChange">
						<view class="picker">+{{ selectedPrefix }}</view>
					</picker>
				</view>
				<input type="tel" maxlength="11" v-model="form.tel" placeholder="手机号">
				<view class="more"></view>
			</view>
			<view class="info" :style="isLoginWay?'':'display: none'">
				<input type="tel" v-model="form.code" maxlength="6" placeholder="请输入验证码">
				<view class="more">
					<button class='cu-btn bg-white shadow' :disabled="btnDisabled"
						@click="_sendMsgCode()">{{btnValue}}</button>
				</view>
			</view>
			<view class="info" :style="isLoginWay?'display: none':''">
				<input :password='!isPassword' v-model="form.passwd" maxlength="26" placeholder="请输入密码">
			</view>
		</view>
		<!-- 按钮 -->
		<view class="btn-info">
			<view class="btn" :style="isLogin?'opacity:1':'opacity:0.4'" @click="isLogin?onLogin():''">
				<text>登录</text>
			</view>
		</view>
		<!-- 操作 -->
		<view class="operation">
			<text @click="onLoginCut">{{isLoginWay?'手机号密码登录':'短信验证码登录'}}</text>
			<text @click="onRegister">新用户注册</text>
		</view>
	</view>
</template>

<script>
	import {
		loginUser
	} from '../../api/user/userApi.js'
	import mapping from '../../lib/java110/java110Mapping';

	import {
		getTokenExpireTime
	} from '../../lib/java110/utils/DateUtil.js'
	import {
		sendSmsCode
	} from '../../api/user/userApi.js';
	import conf from '@/conf/config.js';
	export default {
		data() {
			return {
				logoPng: conf.commonBaseUrl + 'h5/static/logo.png',
				isLogin: false,
				isLoginWay: false,
				isPassword: false,
				btnDisabled: false,
				btnValue: '验证码',
				// 表单
				form: {
					tel: '',
					code: '',
					passwd: '',
				},
				prefixList: ['86', '853', '852'], // 前缀列表
				selectedPrefix: '86', // 默认选择的前缀
			};
		},
		methods: {
			onRegister() {
				uni.navigateTo({
					url: '/pages/public/register'
				})
			},
			/**
			 * 登录切换
			 */
			onLoginCut() {
				this.isLoginWay = !this.isLoginWay;
				// 验证码
				if (this.isLoginWay) {
					this.form.passwd = '';
					this.isLogin = this.form.code && this.form.tel ? true : false;
				}
				// 账号密码
				if (!this.isLoginWay) {
					this.form.code = '';
					this.isLogin = this.form.passwd && this.form.tel ? true : false;
				}
			},
			_sendMsgCode: function() {
				sendSmsCode(this.selectedPrefix + this.form.tel, this);
			},
			/**
			 * 登录点击
			 */
			onLogin() {
				let that = this;
				loginUser({
						...this.form,
						tel: this.selectedPrefix + this.form.tel
					})
					.then(_data => {
						console.log(_data)
						if(_data.code != 0){
							uni.showToast({
								icon:'none',
								title:_data.msg
							})
							return;
						}
						let _userInfo = _data.data;
						wx.setStorageSync(mapping.USER_INFO, _userInfo);
						wx.setStorageSync(mapping.LOGIN_FLAG, {
							sessionKey: _userInfo.userId,
							expireTime: getTokenExpireTime()
						});
						wx.setStorageSync(mapping.TOKEN, _userInfo.token);
						let shopIndex = uni.getStorageSync("ShopIndex");
						if(shopIndex == 'ON'){
							uni.reLaunch({
								url:'/pages/shopIndex/index'
							});
							return ;
						}
						uni.reLaunch({
							url: '/pages/index/index'
						});
						return;
					}, err => {
						uni.showToast({
							icon: 'none',
							title: err
						})
					})
			},
			/**
			 * 选择前缀
			 */
			onPrefixChange(e) {
				this.selectedPrefix = this.prefixList[e.detail.value];
			}
		},

		watch: {
			form: {
				handler(newValue, oldValue) {
					// 验证码
					if (this.isLoginWay) {
						this.isLogin = newValue.code && newValue.tel ? true : false;
					}
					// 账号密码
					if (!this.isLoginWay) {
						this.isLogin = newValue.passwd && newValue.tel ? true : false;
					}
				},
				deep: true
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'login.scss';
	.phone-prefix {
			display: flex;
			align-items: center;
			margin-right: 10px;
		}
	
		.picker {
			padding: 5px 10px;
			border: 1px solid #ccc;
			border-radius: 4px;
			background-color: #f9f9f9;
		}
</style>